<script setup>

import {ref} from "vue";
import {get} from "../../util/request.js";
import {showToast} from "vant";
import {useRoute} from "vue-router";

const city = ref(
    {
      name:"北京",
      id:1
    }
)
if (useRoute().query.cityId !== undefined && useRoute().query.cityName !== undefined){
  city.value = {
    name:useRoute().query.cityName,
    id:useRoute().query.cityId
  }
}
const listings = ref([//房源信息
])

const pagNum = ref(1)
const pagSize = ref(10)

const loading = ref(false);
const finished = ref(false);

const listingsNew = ref([])

get("listings/selectByCityAll",{
  cityId:city.value.id,
  pagSize:10,
  pagNum:1,
  orderByAsc:"created_at"
}).then(res => {
  if (res.code === 0){
    listingsNew.value = res.data;
  } else {
    showToast(res.data);
  }}).catch(()=>{
  showToast("网络错误")
})

const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    get("listings/selectByCityAll",{
      cityId:city.value.id,
      pagSize:pagSize.value,
      pagNum:pagNum.value,
      orderByDesc:"popularity"
    }).then(res => {
      if (res.code === 0){
        pagNum.value++;
        loading.value = false;
        if(res.data.length !== 0){
          for (let i = 0; i < res.data.length; i++) {
            listings.value.push(res.data[i])
          }
        } else {
          finished.value = true;
        }
      } else {
        showToast(res.data);
        finished.value = true;
        loading.value = false;
      }
    }).catch(()=>{
      loading.value = false;
      finished.value = true;
      showToast("网络错误")
    })
  }, 1000);
};


</script>

<template>
  <div style="width: 100vw; height: 100vh;position: relative;">
    <div class="home">

<!--      头-->
      <div>
        <van-row>
          <van-col span="12" style="text-align: left;">
            <h3 style="color: white;margin: 20px">
              <van-icon name="umbrella-circle" />
              租房品牌
            </h3>
          </van-col>
          <van-col span="12">
            <div style="color: white;margin: 20px;text-align: right">
              <van-icon name="chat-o" size="25px" style="margin-right: 10px"/>
              <van-icon name="apps-o" size="25px" style="margin-right: 10px"/>
            </div>
          </van-col>
        </van-row>
      </div>

<!--      搜索框-->
      <div style="
      position: absolute;
      width: 80%;
      left: 10% ;
      top: 60px;
      background-color: white">
        <van-row style="
          box-shadow: 0 0 5px rgba(0,0,0,0.3); /* 10像素的黑色外发光效果，透明度为0.5 */
          display: flex;
          align-items: center; ">
          <van-col span="4" style="text-align:center" @click="()=>{$router.push('/city')}" >{{city.name}}</van-col>
          <van-col span="12" @click="()=>{$router.push('/search')}">
            <van-field left-icon="search" placeholder="想住哪儿？" />
          </van-col>
          <van-col span="8" style="text-align: right;" @click="()=>{$router.push('/')}">
            <van-icon name="guide-o" size="25px" style="margin-right: 10px"/>
          </van-col>
        </van-row>
      </div>
    </div>


    <!--    轮播-->
    <div class="carousel">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image @click="()=>{$router.push('/ba1')}" height="100%" width="100%" src="http://60.205.91.67:9001/java2401/ba1.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image @click="()=>{$router.push('/ba2')}" height="100%" width="100%" src="http://60.205.91.67:9001/java2401/ba2.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image @click="()=>{$router.push('/ba3')}" height="100%" width="100%" src="http://60.205.91.67:9001/java2401/ba3.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image @click="()=>{$router.push('/ba4')}" height="100%" width="100%" src="http://60.205.91.67:9001/java2401/ba4.jpg" />
        </van-swipe-item>
      </van-swipe>
    </div>


    <!--      地图找房那一行-->
    <van-grid clickable :column-num="5" style="margin-top: 50px" gutter="5">
      <van-grid-item icon="home-o" text="地图找房" to="/" />
      <van-grid-item icon="home-o" text="商旅短租" to="/businessTripRental" />
      <van-grid-item icon="home-o" text="附近门店" to="/nearbyStores" />
      <van-grid-item icon="home-o" text="毕业季了" to="/graduationSeason" />
      <van-grid-item icon="home-o" text="企业优惠" to="/enterpriseDiscounts" />
    </van-grid>

<!--    最新房推荐-->
    <van-row>
      <van-col span="12" style="text-align: left;">
        <h4 style="margin-left: 10px">最新推荐</h4>
      </van-col>
      <van-col span="12" style="text-align: right" @click="()=>{$router.push('/more')}">
        <p style="margin-right: 10px">查看更多
          <van-icon name="arrow" />
        </p>
      </van-col>
    </van-row>

    <div style="display: flex;overflow-x: auto;">
      <span v-for="item in listingsNew" style="font-size:14px ; margin-left: 10px; text-align: left" @click="()=>{$router.push({path:'/houseInfo',query:{id:item.listingId}})}">
          <van-image :radius="5" style="width: 120px;height: 100px" :src="item.cover"/><br>
          {{item.houseType}}-{{item.title}}<br>
          {{item.price}}元/月起
      </span>
    </div>



    <!--热门户型-->
    <h4 style="text-align: left;margin-left: 10px">热门户型</h4>
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="item in listings" text="文字" @click="()=>{$router.push({path:'/houseInfo',query:{id:item.listingId}})}">
          <van-image :radius="5" style="width: 160px;height: 120px" :src="item.cover"/>
          <div style="font-size:14px ;text-align: left;width: 160px">
            {{item.houseType}}-{{item.title}}<br>
            {{item.price}}元/月起
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>


    <div style="width: 100%;height: 50px"></div>



  </div>
</template>

<style scoped>



.home{
  width: 100%;
  left: 0;
  height: 200px;
  position: relative;
  background: linear-gradient(to bottom, skyblue, rgba(185, 228, 232, 0.5));
  top: 0;
}

.carousel{
  width: 80%;
  position: absolute;
  left: 10%;
  top: 110px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3); /* 10像素的黑色外发光效果，透明度为0.5 */
}
.my-swipe .van-swipe-item {
  height: 130px;
  /*color: #fff;*/
  font-size: 20px;
  line-height: 130px;
  text-align: center;
  /*background-color: #39a9ed;*/
}



</style>